<template>
  <div>
    <div v-if="nodeConfig.type!=4" class="node-wrap">
      <div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')" :style="nodeConfig.isActivate?'background-color: gold':''">
        <div>
          <div class="title" :style="'background: rgb('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][nodeConfig.type] +');'">
            <span v-show="nodeConfig.type==1" class="iconfont"></span>
            <span v-show="nodeConfig.type==2" class="iconfont"></span>
            <span v-if="nodeConfig.type==0">{{ nodeConfig.nodeName }}</span>
            <input
              v-if="nodeConfig.type!=0&&isInput"
              v-model="nodeConfig.nodeName"
              v-focus
              type="text"
              class="ant-input editable-title-input"
              :placeholder="placeholderList[nodeConfig.type]"
              @blur="blurEvent()"
              @focus="$event.currentTarget.select()"
            >
            <span v-if="nodeConfig.type!=0&&!isInput" class="editable-title" @click="clickEvent()">{{ nodeConfig.nodeName }}</span>
            <i v-if="nodeConfig.type!=0" class="anticon anticon-close close" @click="delNode()" />
          </div>
          <!-- 节点  0是发起人，1是审核人 2是抄送人 3是小条件 4是大条件-->
          <div class="content" @click="setPerson">
            <div v-if="nodeConfig.type==0" class="text">所有人</div>
            <!-- 节点显示的审核人 -->
            <div v-if="nodeConfig.type==1" class="text">
              <span v-if="!setApproverStr(nodeConfig)" class="placeholder">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ setApproverStr(nodeConfig) }}
            </div>
            <!-- 节点显示的抄送人 -->
            <div v-if="nodeConfig.type==2" class="text">
              <span v-if="!copyerStr(nodeConfig)" class="placeholder">请选择{{ placeholderList[nodeConfig.type] }}</span>
              {{ copyerStr(nodeConfig) }}
            </div>
            <i class="anticon anticon-right arrow" />
          </div>

          <div v-if="isTried&&nodeConfig.error" class="error_tip">
            <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);" />
          </div>
        </div>
      </div>
      <addNode :child-node-p.sync="nodeConfig.childNode" />
    </div>
    <div v-if="nodeConfig.type==4" class="branch-wrap">
      <div class="branch-box-wrap">
        <div class="branch-box">
          <button class="add-branch" @click="addTerm">添加条件</button>
          <div v-for="(item,index) in nodeConfig.conditionNodes" :key="index" class="col-box">
            <div class="condition-node">
              <div class="condition-node-box">
                <div class="auto-judge" :class="isTried&&item.error?'error active':''" :style="item.isActivate?'background-color: gold':''">
                  <div v-if="index!=0" class="sort-left" @click="arrTransfer(index,-1)">&lt;</div>
                  <div class="title-wrapper">
                    <input
                      v-if="isInputList[index]"
                      v-model="item.nodeName"
                      v-focus
                      type="text"
                      class="ant-input editable-title-input"
                      @blur="blurEvent(index)"
                      @focus="$event.currentTarget.select()"
                    >
                    <span v-if="!isInputList[index]" class="editable-title" @click="clickEvent(index)">{{ item.nodeName }}</span>
                    <span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{ item.priorityLevel }}</span>
                    <i class="anticon anticon-close close" @click="delTerm(index)" />
                  </div>
                  <div
                    v-if="index!=nodeConfig.conditionNodes.length-1"
                    class="sort-right"
                    @click="arrTransfer(index)"
                  >&gt;</div>
                  <div class="content" @click="setPerson(item.priorityLevel)">{{ conditionStr(item,index) }}</div>
                  <div v-if="isTried&&item.error" class="error_tip">
                    <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);" />
                  </div>
                </div>
                <addNode :child-node-p.sync="item.childNode" />
              </div>
            </div>
            <nodeWrap
              v-if="item.childNode && item.childNode"
              :node-config.sync="item.childNode"
              :table-id="tableId"
              :is-tried.sync="isTried"
              :director-max-level="directorMaxLevel"
            />
            <div v-if="index==0" class="top-left-cover-line" />
            <div v-if="index==0" class="bottom-left-cover-line" />
            <div v-if="index==nodeConfig.conditionNodes.length-1" class="top-right-cover-line" />
            <div v-if="index==nodeConfig.conditionNodes.length-1" class="bottom-right-cover-line" />
          </div>
        </div>
        <addNode :child-node-p.sync="nodeConfig.childNode" />
      </div>
    </div>

    <!-- 审核人抽屉 -->
    <el-drawer :append-to-body="true" title="审核人设置" :visible.sync="approverDrawer" direction="rtl" class="set_promoter" size="550px">
      <div class="demo-drawer__content">
        <div class="drawer_content">
          <div class="approver_content">
            <el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType">
              <el-radio :label="1">指定成员</el-radio>
              <el-radio :label="2">直属上级</el-radio>
            </el-radio-group>
            <el-button
              v-if="approverConfig.settype==1"
              style="min-width: 79px;padding: 8px 12px;font-size: 12px;border-radius: 2px;background: #46A6FE;"
              type="primary"
              @click="addApprover"
            >添加/修改成员</el-button>
            <!-- 指定成员 -->
            <p v-if="approverConfig.settype==1" class="selected_list">
              <span v-for="(item,index) in approverConfig.nodeUserList" :key="index">{{ item.name }}
                <img src="@/assets/images/flow/add-close1.png" @click="removeEle(approverConfig.nodeUserList,item,'targetId')">
              </span>
              <a v-if="approverConfig.nodeUserList.length!=0" @click="approverConfig.nodeUserList=[]">清除</a>
            </p>
          </div>
          <!-- 会或签 -->
          <div class="approver_some">
            <el-radio-group v-model="approverConfig.isOr" class="clear">
              <el-radio :label="1">或签（一人同意或拒绝既可）</el-radio>
              <br>
              <el-radio :label="0">会签（须所有人同意）</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="demo-drawer__footer clear">
          <el-button type="primary" @click="saveApprover">确 定</el-button>
          <el-button @click="approverDrawer = false">取 消</el-button>
        </div>
        <el-dialog :close-on-click-modal="false" title="选择成员" :visible.sync="approverVisible" width="600px" append-to-body class="promoter_person">
          <div class="person_body clear">
            <div class="person_tree l">

              <ul>
                <li v-for="(item,index) in departments.deptList" :key="index+'b'" class="check_box not">
                  <a><img src="@/assets/images/flow/icon_file.png">{{ item.deptName }}</a>

                  <i @click="getDownDept(item)">下级</i>
                  <i @click="getDeptListUP()">上级</i>
                </li>
                <li v-for="(item,index) in departments.userList" :key="index+'c'" class="check_box">
                  <a :class="toggleClass(approverEmplyessList,item)&&'active'" :title="item.departmentNames" @click="toChecked(approverEmplyessList,item)">
                    <img src="@/assets/images/flow/icon_people.png">{{ item.userName }}</a>
                  <i @click="getDownDept(item)">下级</i>
                  <i @click="getDeptListUP()">上级</i>
                </li>
              </ul>
            </div>
            <div class="has_selected l">
              <p class="clear">已选（{{ approverEmplyessList.length }}）
                <a @click="approverEmplyessList=[]">清空</a>
              </p>
              <ul>
                <li v-for="(item,index) in approverEmplyessList" :key="index+'e'">
                  <img src="@/assets/images/flow/icon_people.png">
                  <span>{{ item.userName }}</span>
                  <img src="@/assets/images/flow/cancel.png" @click="removeEle(approverEmplyessList,item)">
                </li>
              </ul>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="approverVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureApprover">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-drawer>

    <!-- 抄送人抽屉 -->
    <el-drawer :append-to-body="true" title="抄送人设置" :visible.sync="copyerDrawer" direction="rtl" class="set_copyer" size="550px">
      <div class="demo-drawer__content">
        <div class="copyer_content drawer_content">
          <el-button type="primary" @click="addCopyer">添加成员</el-button>
          <p class="selected_list">
            <span v-for="(item,index) in copyerConfig.nodeUserList" :key="index">{{ item.name }}
              <img src="@/assets/images/flow/add-close1.png" @click="removeEle(copyerConfig.nodeUserList,item,'targetId')">
            </span>
            <a v-if="copyerConfig.nodeUserList&&copyerConfig.nodeUserList.length!=0" @click="copyerConfig.nodeUserList=[]">清除</a>
          </p>
        </div>
        <div class="demo-drawer__footer clear">
          <el-button type="primary" @click="saveCopyer">确 定</el-button>
          <el-button @click="copyerDrawer = false">取 消</el-button>
        </div>
        <el-dialog :close-on-click-modal="false" title="选择成员" :visible.sync="copyerVisible" width="600px" append-to-body class="promoter_person">
          <div class="person_body clear">
            <div class="person_tree l">

              <el-tabs v-model="activeName">
                <el-tab-pane label="组织架构" name="1" />
              </el-tabs>

              <ul v-if="activeName==1" style="height: 360px;">
                <li v-for="(item,index) in departments.deptList" :key="index+'b'" class="check_box not">
                  <a><img src="@/assets/images/flow/icon_file.png">{{ item.deptName }}</a>

                  <i @click="getDownDept(item)">下级</i>
                  <i @click="getDeptListUP()">上级</i>
                </li>
                <li v-for="(item,index) in departments.userList" :key="index+'c'" class="check_box">
                  <a :class="toggleClass(copyerEmployessList,item)&&'active'" :title="item.departmentNames" @click="toChecked(copyerEmployessList,item)">
                    <img src="@/assets/images/flow/icon_people.png">{{ item.userName }}</a>
                  <i @click="getDeptListUP()">上级</i>
                </li>
              </ul>
            </div>
            <div class="has_selected l">
              <p class="clear">已选（{{ copyerEmployessList.length }}）
                <a @click="copyerEmployessList=[];">清空</a>
              </p>
              <ul>
                <li v-for="(item,index) in copyerEmployessList" :key="index+'e1'">
                  <img src="@/assets/images/flow/icon_people.png">
                  <span>{{ item.userName }}</span>
                  <img src="@/assets/images/flow/cancel.png" @click="removeEle(copyerEmployessList,item)">
                </li>
              </ul>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="copyerVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureCopyer">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-drawer>

    <!-- 条件抽屉 -->
    <el-drawer :append-to-body="true" title="条件设置" :visible.sync="conditionDrawer" direction="rtl" class="condition_copyer" size="550px">
      <select v-model="conditionConfig.priorityLevel" class="priority_level">
        <option v-for="item in conditionsConfig.conditionNodes.length" :key="item" :value="item">优先级{{ item }}</option>
      </select>

      <div class="demo-drawer__content">
        <el-radio-group v-model="conditionType" size="mini" style="width: 178px" @change="selectConditionType">
          <el-radio-button :label="101">部门</el-radio-button>
          <el-radio-button :label="102">员工</el-radio-button>
        </el-radio-group>
        <div class="condition_content drawer_content">
          <ul>
            <li>
              <span class="ellipsis">发起人：</span>
              <div>
                <p :class="'selected_list'" style="cursor:text" @click.self="addConditionRole">
                  <span v-for="(item1,index1) in conditionConfig.nodeUserList" :key="index1">
                    {{ item1.name }}<img src="@/assets/images/flow/add-close1.png" @click="removeEle(conditionConfig.nodeUserList,item1,'targetId')">
                  </span>
                  <input v-if="conditionDepartmentList.length === 0 && conditionEmployessList.length === 0 " type="text" placeholder="请选择具体人员/部门" @click="addConditionRole">
                </p>
              </div>
            </li>
          </ul>
        </div>
        <el-dialog :close-on-click-modal="false" title="选择成员" :visible.sync="conditionRoleVisible" width="600px" append-to-body class="promoter_person">
          <div class="person_body clear">
            <div class="person_tree l">
              <el-tabs v-model="activeName">
                <el-tab-pane label="组织架构" name="1" />
              </el-tabs>
              <ul v-if="activeName==1" style="height: 360px;">
                <li v-for="(item,index) in departments.deptList" v-show="conditionType===102" :key="index+'b'" class="check_box not">
                  <a :class="toggleClass(conditionDepartmentList,item)&&'active'">
                    <img src="@/assets/images/flow/icon_file.png">{{ item.deptName }}</a>
                  <i @click="getDownDept(item,conditionType)">下级</i>
                  <i @click="getDeptListUP()">上级</i>
                </li>

                <li v-for="(item,index) in departments.deptList" v-show="conditionType!==102" :key="index+'b1'" class="check_box">
                  <a :class="toggleClass(conditionDepartmentList,item)&&'active'" @click="toChecked(conditionDepartmentList,item)">
                    <img src="@/assets/images/flow/icon_file.png">{{ item.deptName }}</a>
                  <i @click="getDownDept(item,conditionType)">下级</i>
                  <i @click="getDeptListUP()">上级</i>
                </li>
                <li v-for="(item,index) in departments.userList" v-show="conditionType==102" :key="index+'c'" class="check_box">
                  <a :class="toggleClass(conditionEmployessList,item)&&'active'" :title="item.departmentNames" @click="toChecked(conditionEmployessList,item)">
                    <img src="@/assets/images/flow/icon_people.png">{{ item.userName }}</a>
                  <i @click="getDeptListUP()">上级</i>
                </li>
              </ul>

            </div>
            <div class="has_selected l">
              <p class="clear">已选（{{ conditionDepartmentList.length+conditionEmployessList.length }}）
                <a @click="conditionDepartmentList=[];conditionEmployessList=[];">清空</a>
              </p>
              <ul>
                <li v-for="(item,index) in conditionDepartmentList" :key="index+'e1'">
                  <img src="@/assets/images/flow/icon_file.png">
                  <span>{{ item.deptName }}</span>
                  <img src="@/assets/images/flow/cancel.png" @click="removeEle(conditionDepartmentList,item)">
                </li>
                <li v-for="(item,index) in conditionEmployessList" :key="index+'e2'">
                  <img src="@/assets/images/flow/icon_people.png">
                  <span>{{ item.userName }}</span>
                  <img src="@/assets/images/flow/cancel.png" @click="removeEle(conditionEmployessList,item)">
                </li>
              </ul>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="conditionRoleVisible = false">取 消</el-button>
            <el-button type="primary" @click="sureConditionRole">确 定</el-button>
          </span>
        </el-dialog>
        <div class="demo-drawer__footer clear">
          <el-button type="primary" @click="saveCondition">确 定</el-button>
          <el-button @click="conditionDrawer = false">取 消</el-button>
        </div>
      </div>
    </el-drawer>

    <nodeWrap
      v-if="nodeConfig.childNode && nodeConfig.childNode"
      :node-config.sync="nodeConfig.childNode"
      :table-id="tableId"
      :is-tried.sync="isTried"
      :director-max-level="directorMaxLevel"
    />
  </div>
</template>
<script>
import { findUserAndDept } from '@/api/system/user'
export default {
  props: ['nodeConfig', 'flowPermission', 'directorMaxLevel', 'isTried', 'tableId'],
  data() {
    return {
      placeholderList: ['发起人', '审核人', '抄送人'],
      isInputList: [],
      isInput: false,
      promoterDrawer: false,
      departments: {},
      checkedDepartmentList: [],
      checkedEmployessList: [],
      promoterSearchName: '',
      approverDrawer: false,
      approverVisible: false,
      approverRoleVisible: false,
      approverConfig: {},
      approverEmplyessList: [],
      approverRoleSearchName: '',
      copyerDrawer: false,
      copyerVisible: false,
      copyerConfig: {},
      activeName: '1',
      copyerEmployessList: [],
      ccSelfSelectFlag: [],
      conditionDrawer: false,
      conditionVisible: false,
      conditionConfig: {},
      conditionsConfig: {
        conditionNodes: []
      },
      bPriorityLevel: '',
      conditions: [],
      conditionList: [],
      conditionRoleVisible: false,
      conditionDepartmentList: [],
      conditionEmployessList: [],
      pidUPlist: [],
      conditionType: 101,
      currentConditionType: '',
      currentConditionObj: [],
      currentConditionDepartmentList: [],
      currentConditionEmployessList: []

    }
  },
  created() {
  },
  mounted() {
    // console.log('请设置条件1')
    // console.log(this.nodeConfig)
    if (this.nodeConfig.type === 1) {
      this.nodeConfig.error = !this.setApproverStr(this.nodeConfig)
    } else if (this.nodeConfig.type === 2) {
      this.nodeConfig.error = !this.copyerStr(this.nodeConfig)
    } else if (this.nodeConfig.type === 4) {
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件1' && i !== this.nodeConfig.conditionNodes.length - 1
      }
    }
  },
  methods: {
    selectConditionType() {
      // 条件类型切换，如果不是当前类型，就临时保存当前类型，清空当前节点的信息，如果切换回当前类型，把临时的值重新赋值
      if (this.currentConditionType === this.conditionType) {
        this.conditionConfig.nodeUserList = this.currentConditionObj
        this.conditionDepartmentList = this.currentConditionDepartmentList
        this.conditionEmployessList = this.currentConditionEmployessList
      } else {
        this.currentConditionObj = this.conditionConfig.nodeUserList
        this.currentConditionDepartmentList = this.conditionDepartmentList
        this.currentConditionEmployessList = this.conditionEmployessList
        this.conditionConfig.nodeUserList = []
        this.conditionDepartmentList = []
        this.conditionEmployessList = []
      }
    },
    clickEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, true)
      } else {
        this.isInput = true
      }
    },
    blurEvent(index) {
      if (index || index === 0) {
        this.$set(this.isInputList, index, false)
        this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName ? this.nodeConfig.conditionNodes[index].nodeName : '条件'
      } else {
        this.isInput = false
        this.nodeConfig.nodeName = this.nodeConfig.nodeName ? this.nodeConfig.nodeName : this.placeholderList[this.nodeConfig.type]
      }
    },
    conditionStr(item, index) {
      // console.log('请设置条件2')
      // console.log(this.nodeConfig)
      var { nodeUserList } = item
      if (nodeUserList.length === 0) {
        return (index === this.nodeConfig.conditionNodes.length - 1) && this.nodeConfig.conditionNodes[0].nodeUserList.length !== 0 ? '其他条件进入此流程' : '请设置条件2'
      } else {
        let str = ''
        str += '发起人属于：'
        str += nodeUserList.map(item => { return item.name }).join('或')
        return str || '请设置条件3'
        // return str ? str.substring(0, str.length - 4) : '请设置条件3'
      }
    },
    dealStr(str, obj) {
      const arr = []
      const list = str.split(',')
      for (var elem in obj) {
        list.map(item => {
          if (item === elem) {
            arr.push(obj[elem].value)
          }
        })
      }
      return arr.join('或')
    },
    // 条件添加输入框
    addConditionRole() {
      this.conditionRoleVisible = true
      this.activeName = '1'
      this.getInitDeptList()
      this.conditionDepartmentList = []
      this.conditionEmployessList = []
      for (var i = 0; i < this.conditionConfig.nodeUserList.length; i++) {
        var { type, name, targetId } = this.conditionConfig.nodeUserList[i]
        if (type === 101) {
          this.conditionDepartmentList.push({
            deptName: name,
            id: targetId
          })
        } else if (type === 102) {
          this.conditionEmployessList.push({
            userName: name,
            id: targetId
          })
        }
      }
    },
    // 条件抽屉里的对话框
    sureConditionRole() {
      this.conditionConfig.nodeUserList = []
      // 封装部门参数
      this.conditionDepartmentList.map(item => {
        this.conditionConfig.nodeUserList.push({
          type: 101,
          targetId: item.id,
          name: item.deptName,
          showName: '部门'
        })
      })
      // 封装用户参数
      this.conditionEmployessList.map(item => {
        this.conditionConfig.nodeUserList.push({
          type: 102,
          targetId: item.id,
          name: item.userName,
          showName: '员工'
        })
      })
      this.conditionRoleVisible = false
    },
    addCondition() {
      this.conditionList = []
      this.conditionVisible = true

    //   this.$axios.get(`${process.env.BASE_URL}conditions.json?tableId=${this.tableId}`).then(res => {
    //     this.conditions = res.data
    //     if (this.conditionConfig.conditionList) {
    //       for (var i = 0; i < this.conditionConfig.conditionList.length; i++) {
    //         var { columnId } = this.conditionConfig.conditionList[i]
    //         if (columnId === 0) {
    //           this.conditionList.push({ columnId: 0 })
    //         } else {
    //           this.conditionList.push(this.conditions.filter(item => { return item.columnId === columnId })[0])
    //         }
    //       }
    //     }
    //   })
    },
    // 条件抽屉确认
    saveCondition() {
      console.log(1111111)
      this.conditionDrawer = false
      var a = this.conditionsConfig.conditionNodes.splice(this.bPriorityLevel - 1, 1)// 截取旧下标
      this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priorityLevel - 1, 0, a[0])// 填充新下标
      this.conditionsConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
      })

      for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
        this.conditionsConfig.conditionNodes[i].error = this.conditionStr(this.conditionsConfig.conditionNodes[i], i) === '请设置条件4' && i !== this.conditionsConfig.conditionNodes.length - 1
      }
      this.$emit('update:nodeConfig', this.conditionsConfig)
    },
    // 往临时数组里添加抄送人
    addCopyer() {
      // if (this.copyerConfig.nodeUserList.length > 0) {
      //   for (var j = 0; j < this.this.copyerConfig.nodeUserList.length; j++) {
      //     this.toChecked(this.conditionEmployessList, this.conditionsConfig.nodeUserList[j])
      //   }
      // }
      this.copyerConfig
      this.copyerVisible = true
      this.activeName = '1'
      this.getInitDeptList()
      this.copyerEmployessList = []
      for (var i = 0; i < this.copyerConfig.nodeUserList.length; i++) {
        var { name, targetId } = this.copyerConfig.nodeUserList[i]
        this.copyerEmployessList.push({
          userName: name,
          id: targetId
        })
      }
    },
    // 添加抄送人   1：审核人，2：抄送人，3：大条件，4：小条件
    sureCopyer() {
      this.copyerConfig.nodeUserList = []
      this.copyerEmployessList.map(item => {
        this.copyerConfig.nodeUserList.push({
          type: 2,
          targetId: item.id,
          name: item.userName,
          showName: '抄送人'
        })
      })
      this.copyerVisible = false
    },
    // 保存抄送人
    saveCopyer() {
      this.copyerConfig.ccSelfSelectFlag = this.ccSelfSelectFlag.length === 0 ? 0 : 1
      this.copyerConfig.error = !this.copyerStr(this.copyerConfig)
      this.$emit('update:nodeConfig', this.copyerConfig)
      this.copyerDrawer = false
    },
    // 抄送人提示
    copyerStr(nodeConfig) {
      if (nodeConfig.nodeUserList.length !== 0) {
        return this.arrToStr(nodeConfig.nodeUserList)
      } else {
        if (nodeConfig.ccSelfSelectFlag === 1) {
          return ''
        }
      }
    },
    changeType(val) {
      this.approverConfig.nodeUserList = []
      this.approverConfig.examineMode = 1
      this.approverConfig.noHanderAction = 2
      if (val === 2) {
        this.approverConfig.directorLevel = 1
      } else if (val === 4) {
        // this.approverConfig.selectMode = 1;
        this.approverConfig.selectRange = 1
      } else if (val === 7) {
        this.approverConfig.examineEndDirectorLevel = 1
      }
    },
    // 往临时数组添加审核人
    addApprover() {
      this.approverVisible = true
      this.getInitDeptList()
      this.approverEmplyessList = []
      for (var i = 0; i < this.approverConfig.nodeUserList.length; i++) {
        var { name, targetId } = this.approverConfig.nodeUserList[i]
        this.approverEmplyessList.push({
          userName: name,
          id: targetId
        })
      }
    },
    // 确认对话框审核人 1：审核人，2：抄送人，3：大条件，4：小条件
    sureApprover() {
      this.approverConfig.nodeUserList = []
      if (this.approverConfig.settype === 1) {
        this.approverEmplyessList.map(item => {
          this.approverConfig.nodeUserList.push({
            type: 1,
            targetId: item.id,
            name: item.userName,
            showName: '审批人'
          })
        })
        this.approverVisible = false
      }
    },
    // 设置审核人类型
    setApproverStr(nodeConfig) {
      // console.log(this.nodeConfig)
      // 默认是或签
      if (nodeConfig.isOr === undefined) {
        nodeConfig.isOr = 1
      }
      let OrName = ''
      if (nodeConfig.isOr === 1) {
        OrName = '（或签）'
      } else {
        OrName = '（会签）'
      }
      if (nodeConfig.settype === 1) {
        //  指定成员
        if (nodeConfig.nodeUserList.length === 1) {
          return nodeConfig.nodeUserList[0].name + OrName
        } else if (nodeConfig.nodeUserList.length > 1) {
          return this.arrToStr(nodeConfig.nodeUserList) + OrName
          // return nodeConfig.nodeUserList.length + '人会签'
        }
      } else if (nodeConfig.settype === 2) {
        //  直属上级
        return '直属上级'
      }
    },
    // 确认抽屉 审核人
    saveApprover() {
      // 1：审核人，2：直属上级
      if (this.approverConfig.settype === 2) {
        this.approverConfig.nodeUserList.push({
          type: 2,
          targetId: '直属上级',
          name: '直属上级',
          showName: '直属上级'
        })
        this.approverVisible = false
      }
      this.approverConfig.error = !this.setApproverStr(this.approverConfig)
      this.$emit('update:nodeConfig', this.approverConfig)
      this.approverDrawer = false
    },

    // 拼接数组的里的名称
    arrToStr(arr) {
      if (arr) {
        return arr.map(item => { return item.name }).toString()
      }
    },

    // 判断是否包含，来动态添加样式
    toggleClass(arr, elem, key = 'id') {
      return arr.some(item => { return item[key] === elem[key] })
    },

    // 直接勾选某个部门或部门
    toChecked(arr, elem, key = 'id') {
      var isIncludes = this.toggleClass(arr, elem, key)
      !isIncludes ? arr.push(elem) : this.removeEle(arr, elem, key)
    },

    // 取消勾选的部门活员工
    removeEle(arr, elem, key = 'id') {
      var includesIndex
      arr.map((item, index) => {
        if (item[key] === elem[key]) {
          includesIndex = index
        }
      })
      arr.splice(includesIndex, 1)
    },

    // 第一级下的部门和员工
    getInitDeptList() {
      const params = {
        deptId: 0
      }
      findUserAndDept(params).then(res => {
        if (res.code === 20000) {
          this.departments = res.data
        }
      })
    },
    // 上级 部门和员工
    getDeptListUP() {
      if (this.pidUPlist.length > 0) {
        const params = {
          deptId: this.pidUPlist.pop()
        }
        findUserAndDept(params).then(res => {
          if (res.code === 20000) {
            this.departments = res.data
          }
        })
      } else {
        this.$message.info('已经是最顶级了!')
      }
    },

    // 下级的部门
    getDownDept(dept, ctype) {
      const params = {
        deptId: dept.id
      }
      if (ctype === 101) {
        findUserAndDept(params).then(res => {
          if (res.code === 20000) {
            if (res.data.deptList.length === 0) {
              this.$message.info('已经是最低级了!')
            } else {
              this.pidUPlist.push(dept.pid)
              this.departments = res.data
            }
          }
        })
      } else {
        findUserAndDept(params).then(res => {
          if (res.code === 20000) {
            if (res.data.deptList.length === 0 && res.data.userList.length === 0) {
              this.$message.info('已经是最低级了!')
            } else {
              this.pidUPlist.push(dept.pid)
              this.departments = res.data
            }
          }
        })
      }
    },
    // 删除节点
    delNode() {
      this.$emit('update:nodeConfig', this.nodeConfig.childNode)
    },
    // 添加同层级的条件
    addTerm() {
      const len = this.nodeConfig.conditionNodes.length + 1
      this.nodeConfig.conditionNodes.push({
        'nodeName': '条件' + len,
        'type': 3,
        'priorityLevel': len,
        'conditionList': [],
        'nodeUserList': [],
        'childNode': null
      })

      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = (i !== this.nodeConfig.conditionNodes.length - 1)
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件5' && i !== this.nodeConfig.conditionNodes.length - 1
      }

      this.$emit('update:nodeConfig', this.nodeConfig)
    },
    // 删除同层级的条件
    delTerm(index) {
      this.nodeConfig.conditionNodes.splice(index, 1)
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件6' && i !== this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit('update:nodeConfig', this.nodeConfig)
      if (this.nodeConfig.conditionNodes.length === 1) {
        if (this.nodeConfig.childNode) {
          if (this.nodeConfig.conditionNodes[0].childNode) {
            this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
          } else {
            this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
          }
        }
        this.$emit('update:nodeConfig', this.nodeConfig.conditionNodes[0].childNode)
      }
    },
    reData(data, addData) {
      if (!data.childNode) {
        data.childNode = addData
      } else {
        this.reData(data.childNode, addData)
      }
    },
    // 设置节点
    setPerson(priorityLevel) {
      var { type } = this.nodeConfig
      if (type === 0) {
        // this.promoterDrawer = true
      } else if (type === 1) {
        // 默认是或签
        if (this.nodeConfig.isOr === null) {
          this.nodeConfig.isOr = 1
        }

        // 审批人抽屉
        this.approverDrawer = true
        this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.approverConfig.settype = this.approverConfig.settype ? this.approverConfig.settype : 1
      } else if (type === 2) {
        // 抄送人抽屉
        this.copyerDrawer = true
        this.copyerConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.ccSelfSelectFlag = this.copyerConfig.ccSelfSelectFlag === 0 ? [] : [this.copyerConfig.ccSelfSelectFlag]
      } else {
        // 条件抽屉

        this.conditionDrawer = true
        this.bPriorityLevel = priorityLevel
        this.conditionsConfig = JSON.parse(JSON.stringify(this.nodeConfig))
        this.conditionConfig = this.conditionsConfig.conditionNodes[priorityLevel - 1]
        if (this.conditionConfig.nodeUserList.length !== 0) {
          this.conditionType = this.conditionConfig.nodeUserList[0].type
          this.currentConditionType = this.conditionType
          if (this.conditionType === 101) { // 部门类型
            this.conditionDepartmentList = this.conditionConfig.nodeUserList
          } else if (this.conditionType === 102) { // 员工类型
            this.conditionEmployessList = this.conditionConfig.nodeUserList
          }
        }
      }
    },
    arrTransfer(index, type = 1) { // 向左-1,向右1
      this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0]
      this.nodeConfig.conditionNodes.map((item, index) => {
        item.priorityLevel = index + 1
      })
      for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
        this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) === '请设置条件7' && i !== this.nodeConfig.conditionNodes.length - 1
      }
      this.$emit('update:nodeConfig', this.nodeConfig)
    }
  }
}
</script>
<style>
.error_tip {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(150%, 0px);
    font-size: 24px;
}
.add-node-popover-body {
    display: flex;
}
.promoter_content {
    padding: 0 20px;
}
.condition_content .el-button,
.copyer_content .el-button,
.approver_self_select .el-button,
.promoter_content .el-button,
.approver_content .el-button {
    margin-bottom: 20px;
}
.promoter_content p {
    padding: 18px 0;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}
.promoter_person .el-dialog__body {
    padding: 10px 20px 14px 20px;
}
.person_body {
    border: 1px solid #f5f5f5;
    height: 500px;
}
.person_tree {
    padding: 10px 12px 0 8px;
    width: 280px;
    height: 100%;
    border-right: 1px solid #f5f5f5;
}
.person_tree input {
    padding-left: 22px;
    width: 210px;
    height: 30px;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid #d5dadf;
    background: url(~@/assets/images/flow/list_search.png) no-repeat 10px center;
    background-size: 14px 14px;
    margin-bottom: 14px;
}
.tree_nav span {
    display: inline-block;
    padding-right: 10px;
    margin-right: 5px;
    max-width: 6em;
    color: #38adff;
    font-size: 12px;
    cursor: pointer;
    background: url(~@/assets/images/flow/jiaojiao.png) no-repeat right center;
}
.tree_nav span:last-of-type {
    background: none;
}
.person_tree ul,
.has_selected ul {
    height: 420px;
    overflow-y: auto;
}
.person_tree li {
    padding: 5px 0;
}
.person_tree li i {
    float: right;
    padding-left: 24px;
    padding-right: 10px;
    color: #3195f8;
    font-size: 12px;
    cursor: pointer;
    background: url(~@/assets/images/flow/next_level_active.png) no-repeat 10px
        center;
    border-left: 1px solid rgb(238, 238, 238);
}
.person_tree li a.active + i {
    color: rgb(197, 197, 197);
    background-image: url(~@/assets/images/flow/next_level.png);
    pointer-events: none;
}
.person_tree img {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
}
.has_selected {
    width: 276px;
    height: 100%;
    font-size: 12px;
}
.has_selected ul {
    height: 460px;
}
.has_selected p {
    padding-left: 19px;
    padding-right: 20px;
    line-height: 37px;
    border-bottom: 1px solid #f2f2f2;
}
.has_selected p a {
    float: right;
}
.has_selected ul li {
    margin: 11px 26px 13px 19px;
    line-height: 17px;
}
.has_selected li span {
    vertical-align: middle;
}
.has_selected li img:first-of-type {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
}
.has_selected li img:last-of-type {
    float: right;
    margin-top: 2px;
    width: 14px;
}
el-radio-group {
    padding: 20px 0;
}
.approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
}
.approver_content .el-radio,
.approver_some .el-radio,
.approver_self_select .el-radio {
    width: 27%;
    margin-bottom: 20px;
}
.copyer_content .el-checkbox {
    margin-bottom: 20px;
}
.el-checkbox__label {
    font-size: 12px;
}
.condition_content,
.copyer_content,
.approver_self_select,
.approver_manager,
.approver_content,
.approver_some {
    padding: 20px 20px 0;
}
.approver_manager p:first-of-type,
.approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
}

.approver_manager p {
    line-height: 32px;
}
.approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
}
.approver_self {
    padding: 28px 20px;
}
.selected_list {
    margin-bottom: 20px;
    line-height: 30px;
}
.selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid rgba(220, 220, 220, 1);
}
.selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
}
.approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
}
.condition_copyer .el-drawer__body .priority_level {
    position: absolute;
    top: 11px;
    right: 30px;
    width: 100px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.condition_content p.tip {
    margin: 20px 0;
    width: 510px;
    text-indent: 17px;
    line-height: 45px;
    background: rgba(241, 249, 255, 1);
    border: 1px solid rgba(64, 163, 247, 1);
    color: #46a6fe;
    font-size: 14px;
}
.condition_content ul {
    max-height: 500px;
    overflow-y: scroll;
    margin-bottom: 20px;
}
.condition_content li > span {
    float: left;
    margin-right: 8px;
    width: 70px;
    line-height: 32px;
    text-align: right;
}
.condition_content li > div {
    display: inline-block;
    width: 370px;
}
.condition_content li:not(:last-child) > div > p {
    margin-bottom: 20px;
}
.condition_content li > div > p:not(:last-child) {
    margin-bottom: 10px;
}
.condition_content li > a {
    float: right;
    margin-right: 10px;
    margin-top: 7px;
}
.condition_content li select,
.condition_content li input {
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.condition_content li select + input {
    width: 260px;
}
.condition_content li select {
    margin-right: 10px;
    width: 100px;
}
.condition_content li p.selected_list {
    /* padding-left: 10px; */
    border-radius: 4px;
    min-height: 32px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.condition_content li p.check_box {
    line-height: 32px;
}
.condition_list .el-dialog__body {
    padding: 16px 26px;
}
.condition_list p {
    color: #666666;
    margin-bottom: 10px;
}
.condition_list p.check_box {
    margin-bottom: 0;
    line-height: 36px;
}
.isactivate {
background-color: gold;
}
</style>
